<template>
  <Card title="MySQL数据库配置" :bordered="false" :dis-hover="true">
    <div slot="extra">
      <Button
        size="small"
        type="primary"
        class="card-extra-item"
        @click="saveMysqlConfig"
        >保存</Button
      >
    </div>
    <Row :gutter="10">
      <Col span="12">
        <JsonEditor
          v-model="parameter.value"
          jsonEditorId="mysqlParameterValue"
          style="height: 760px"
        ></JsonEditor>
      </Col>
      <Col span="12">
        <MarkdownEditor
          style="height: 760px"
          :toolbarsFlag="false"
          :content="markdownInfo.content"
          @save="save"
        ></MarkdownEditor>
      </Col>
    </Row>
  </Card>
</template>
<script>
import {
  getParameters,
  createParameter,
  updateParameter,
} from "@/api/HttpAutoTestService/parameter";
import {
  getMarkdowns,
  createMarkdown,
  updateMarkdown,
} from "@/api/HttpAutoTestService/markdown";
import JsonEditor from "_c/json-editor";
import MarkdownEditor from "_c/markdown";
export default {
  name: "mysql-config",
  components: {
    JsonEditor,
    MarkdownEditor,
  },
  mounted() {
    getMarkdowns({ types: this.markdownInfo.types }).then((res) => {
      if (res.status === 200 && res.data.count) {
        const data = res.data;
        this.markdownInfo.id = data.results[0].id;
        this.markdownInfo.content = data.results[0].content;
      }
    });
    getParameters({ key: "MYSQL_CONFIG" }).then((res) => {
      const data = res.data;
      let results = data.results;
      if (results.length > 0) {
        this.parameter.id = results[0].id;
        this.parameter.name = results[0].name;
        this.parameter.key = results[0].key;
        this.parameter.value = JSON.parse(results[0].value);
      }
    });
  },
  data() {
    return {
      parameter: {
        id: "",
        name: "MYSQL数据库配置",
        key: "MYSQL_CONFIG",
        value: [
          {
            mysql_tag: "",
            host: "127.0.0.1",
            port: 3306,
            user: "",
            password: "",
            db: "",
            charset: "utf8",
            ssh_host: "",
            ssh_username: "",
            ssh_password: "",
            use_ssh_tunnel: false,
          },
        ],
      },
      markdownInfo: {
        id: "",
        name: "Mysql数据库配置帮助信息",
        types: "MYSQL_CONFIG_HELP_INFO",
        content: "",
      },
    };
  },
  methods: {
    saveMysqlConfig() {
      let parameter = {
        id: this.parameter.id,
        name: this.parameter.name,
        key: this.parameter.key,
        value: JSON.stringify(this.parameter.value),
      };
      if (parameter.id) {
        updateParameter(parameter).then((res) => {
          this.$Message.info("保存成功");
        });
      } else {
        delete parameter["id"];
        createParameter(parameter).then((res) => {
          if (res.status === 201) {
            this.parameter.id = res.data.id;
            this.$Message.info("保存成功");
          }
        });
      }
    },
    // 保存content
    save(value, render) {
      this.markdownInfo.content = value;
      if (this.markdownInfo.id) {
        updateMarkdown(this.markdownInfo).then((res) => {});
      } else {
        delete this.markdownInfo.id;
        createMarkdown(this.markdownInfo).then((res) => {
          if (res.status === 201) {
            this.markdownInfo.id = res.data.id;
          }
        });
      }
    },
  },
};
</script>
<style scoped>
</style>